react-split-button

react-split-button

A carefully crafted split-button for React

See split-button demo

Install

$ npm install react-split-button --save

Description

The split-button is similar to the dropdown button, but also enables a default action on the button, without showing the drop-down menu.

The split button smartly positions the drop-down menu to fit into the document. You can customize how the menu is aligned to the button. With one function, you can respond to a click in the menu at any nesting level.

Worth trying out, see the demo page

Changelog

See Changelog

Usage

var SplitButton = require('react-split-button')

var items = [
	{
		label: 'save as',
		onClick: function(){
			console.log('saved as')
		},
		items: [
			{
				label: 'PDF',
				onClick: function(){
					console.log('save as PDF')
				}
			},
			{
				label: 'Postscript'
			}
		]
	},
	{
		label: 'export',
		onClick: function(){
			console.log('exported')
		}
	},
]

function save(){
	console.log('SAVED!')
}

<SplitButton items={items} onClick={save}>
	Save
</SplitButton>

function onMenuClick(event, itemProps){
	console.log('You clicked ', itemProps.data.label)
}

<SplitButton items={items} onMenuClick={onMenuClick} onClick={save}>
	Save
</SplitButton>

Properties

The split button is implemented as two buttons, one next to the other (named button and arrow from now on). The arrow button is just a react-dropdown-button

Actions

• onClick: Function - function to be called when the button is clicked (not the arrow!)
• onToggle: Function(pressed: boolean) - function to be called when the button is toggled
• onArrowClick: Function - function to be called when the arrow is clicked
• onMenuClick: Function(event, itemProps) - a function to be called when a menu item is clicked

Menu-related attributes

• items - an array of menu items to build the menu
• menu - you can specify a menu instead of the menu items

Other attributes

• href - href for the button

• align - applied to the button

• label - applied to the button

• disabled - applied to the button and the arrow

• pressed - applied to the button

• defaultPressed - applied to the button

• theme - a theme to apply the button and the arrow. See buttom styling

• buttonProps - props for the button

• arrowProps - props for the arrow

• commonProps - props for both the button and the arrow

• buttonStyle

• arrowStyle

• commonStyle - styles to be applied to both the arrow and the button

Contributing

$ npm install
$ npm run dev # to start webpack-dev-server
$ npm run serve # to start http-server on port 9091

now navigate to localhost:9091

Roadmap

See Roadmap

License

MIT